<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 18px">
      <el-breadcrumb-item :to="{ path: '/' }">用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>个人中心</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item>
        <el-descriptions>
          <el-descriptions-item  label="头像" span="3" >
            <div>
            <el-avatar :src="ruleForm.avatar" size="large"></el-avatar>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="用户名" span="3" >{{ ruleForm.username }}</el-descriptions-item>
          <el-descriptions-item label="联系电话" span="3" >{{ ruleForm.tel }}</el-descriptions-item>
          <el-descriptions-item label="真实姓名" span="3">{{ ruleForm.realName }}</el-descriptions-item>
          <el-descriptions-item label="备注" span="3">{{ ruleForm.remarks }}</el-descriptions-item>
          <el-descriptions-item label="角色" span="3">{{ ruleForm.roleName }}</el-descriptions-item>
        </el-descriptions>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="backToPreStep()">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {},
      rules: {}
    };
  },
  methods: {
    backToPreStep() {
      this.$router.push('/sys-admin/temp/user/list');
    },
    loadMessage(){
      let url = 'http://localhost:8080/users/selectInfo'
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=>{
        this.ruleForm=response.data.data;
      })
    },
  },
  mounted() {
    this.loadMessage();
  }
}
</script>